<template>
  <div class="index">
    <view :style="{ height: statusBarHeight + 'px' }"></view>
    <view id="searchOuterView">
      <input @click="clickInput" id="searchInnerView" placeholder="请输入搜索关键词" v-model="searchValue" />
    </view>
    <!-- 设备显示 -->
    <view id="DevView">
      <view class="deva" @click="handleViewDevice">
        <view class="dev1">
          <text>已连接设备</text>
        </view>
        <view class="dev1">
          <text>{{ collectDeviceNum }}个</text>
        </view>
      </view>
      <view class="devb" @click="clickInput">
        <view class="dev1">
          <text>总设备量</text>
        </view>
        <view class="dev1">
          <text>{{ totalDeviceNum }}个</text>
        </view>
      </view>
    </view>
    <!-- 主要状态显示菜单 -->
    <view id="navView">
      <view class="navItemView">
        <img src="../../static/index/circle.png"/>
        <view class="numshow1">
          <view>
            {{ deviceData.hydrogen_concentration || '' }}
          </view>
          <view>
            mg/m³
          </view>
        </view>
        <text>氨气浓度</text>
      </view>
      <view class="navItemView">
        <img src="../../static/index/circle.png"/>
        <view class="numshow2">{{ deviceData.temperature || ''}}℃</view>
        <text>温度</text>
      </view>
      <view class="navItemView">
        <img src="../../static/index/circle.png"/>
        <text>湿度</text>
        <view class="numshow2">{{ deviceData.humidity || ''}}％</view>
      </view>
      <view class="navItemView">
        <img src="../../static/index/circle.png"/>
        <text>生态液</text>
        <view class="numshow1">
          <view>

          </view>
          <view>
            {{ deviceData.ecological_liquid || ''}} ％
          </view>
        </view>
      </view>
      <view class="navItemView">
        <img src="../../static/index/circle.png"/>
        <text>运行状态</text>
        <view class="numshow2">{{ deviceData.run_status ? '正常' : '关闭'}}</view>
      </view>
      <view class="navItemView">
        <img src="../../static/index/circle.png"/>
        <text>是否清洗</text>
        <view class="numshow2">{{ deviceData.clean_status ? '是' : '否' }}</view>
      </view>
    </view>

    <!-- 开关按钮 -->
    <view class="switch1">
      <text>除臭器开关按钮</text>
      <view class="body-switch1">
        <u-switch @change="handleEnable" v-model="deviceConnectDetail.enable_status"  active-color="red" inactive-color="#eee" :active-value="1" :inactive-value="0"></u-switch>
      </view>
    </view>
    <!--    弹窗设备详情 -->
    <u-popup closeable class="devicePopup" v-model="showDevice" mode="center" border-radius="14" width="80%">
      <div class="devicePopup-content">
        <view>设备详情</view>
        <view>设备名称：{{ deviceDetail.name }}</view>
      </div>
    </u-popup>
  </div>
</template>

<script>
	import dayjs from "dayjs";
  export default {
		data() {
			return {
        statusBarHeight: 0,
        searchValue: '',
        deviceList: [],
        collectDeviceNum: 0,
        totalDeviceNum: 0,
        showDevice: false,
        deviceDetail: {
        },
        deviceConnectDetail: {
          enable_status: 0
        },
        memberId: '',
        deviceData: {}
			}
		},
    onShow() {
      this.memberId = uni.getStorageSync('memberId')
      this.getHeight()
      if (this.memberId) {
        this.getDeviceList()
      } else {
        uni.navigateTo({
          url: '/pages/user/login'
        })
      }
    },
		methods: {
      getHeight() {
        let that = this;
        let sysinfo = wx.getSystemInfoSync(),
            statusHeight = sysinfo.statusBarHeight,//状态栏高度
            isiOS = sysinfo.system.indexOf('iOS') > -1,
            navHeight;
        if (!isiOS) {//胶囊高度
          navHeight = 48;
        } else {
          navHeight = 44;
        }
        that.statusBarHeight=statusHeight+navHeight
      },
      async getDeviceList() {
        this.deviceDetail = {}
        this.deviceConnectDetail = {
          enable_status: 0
        }
        this.deviceData = {}
        this.collectDeviceNum = 0
        this.totalDeviceNum = 0
        // 总设备
        this.deviceList = await this.$api.deviceList({})
        this.totalDeviceNum = this.deviceList.length
        // 查看已连接设备
        const memberDetail = await this.$api.memberDetail(this.memberId)
        if (memberDetail.device_id && memberDetail.connect_id) {
          this.deviceDetail = await this.$api.deviceDetail(memberDetail.device_id)
          this.deviceConnectDetail = await this.$api.connectDetail(memberDetail.connect_id)
          this.collectDeviceNum = 1
          // 获取设备数据 当天
          this.$api.deviceDataList({
            device_id: memberDetail.device_id,
            member_id: this.memberId,
            start_time: dayjs().format('YYYY-MM-DD'),
            end_time: dayjs().format('YYYY-MM-DD')
          }).then(res => {
            if (res) {
              this.deviceData = res[0]
            }
          })
        } else {
          uni.showToast({
            title: '请先绑定设备',
            icon: 'none'
          })
        }
      },
      clickInput() {
        uni.navigateTo({
          url: '/pages/device-list/device-list'
        })
      },
      handleViewDevice() {
        if (this.deviceDetail.id) {
          this.showDevice = true
        } else {
          uni.showToast({
            title: '暂未连接设备',
            icon: 'none'
          })
        }
      },
      handleEnable(val) {
        this.$api.updateEnableStatus({
          connect_id: this.deviceConnectDetail.id,
          device_id: this.deviceDetail.id,
          member_id: this.memberId,
          enable_status: val
        }).then(() => {
          uni.showToast({
            title: '操作成功',
            icon: 'none'
          })
        })
      }
		}
	}
</script>

<style lang="scss">
.index {
  height: 100%;
  position: relative;
  z-index: 2;
}
.devicePopup {
  padding: 30rpx;
}
.devicePopup-content {
  padding: 100rpx 20rpx;
  text-align: center;
}
/* 顶部搜索框 */
/* # 是通过id查找 ； 在微信小程序中使用的单位是rpx，1pt=1px=2rpx*/
#searchOuterView{
  padding: 15rpx;
}
.all{
  position: fixed;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#searchInnerView{
  text-align: center;
  width: 720rpx;
  height: 70rpx;
  background: #eeeeee;
  border: 2rpx solid #FFFFFF;
  border-radius: 8rpx;
  line-height: 58rpx;
  box-sizing: border-box; /* 设置边框包含在宽高之内 */
  opacity: 0.5;
  padding: 0 20rpx !important;
  input {
    padding: 0 20rpx;
  }
}
#searchInnerView > text{
  font-size: 25rpx;
  color: #B1B1B1;
}

#DevView{
  width: auto;
  height: 150rpx;
  color:aliceblue;
  padding: 0px;
  display: flex;
  margin: 10px;
  background: rgba(146, 148, 245, 0.3);
  border: 1px solid rgba(146, 148, 245, 0.3);
  border-radius: 3px;
}
.deva, .devb{
  width: 100%;
  height: 150rpx;
  text-align: center;
}
.devb{
  border-left: 1px dotted rgba(121, 122, 207, 0.7);
}
.dev1 text{
  height: 75rpx;
  line-height: 75rpx;
  text-align: center;
}

/* 主要状态显示菜单 */
#navView{
  display: flex;  /* 应用flex布局 ，所有的子元素排在一行*/
  flex-wrap: wrap; /* 换行*/
  height: 500rpx;
  align-content: space-around; /* 多行垂直排列*/
  font-size: 30rpx;
  font-weight: 500;
  color: rgb(109, 255, 128);
  justify-content: center;
}
.navItemView{
  width: 30%;
  text-align: center;
  position: relative;
  text {
    display: inline-block;
    width: 100%;
    text-align: center;
  }
}
.navItemView > img{
  width: 200rpx;
  height: 200rpx;
}
.numshow1,.numshow2{
  width: 80rpx;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 25rpx;
  color:#FFFFFF;
}
.numshow1{
  width: 100%;
  text-align: center;
  margin-top: -20rpx;
}
.numshow2{
  height: 40%;
}


/* 开关按钮 */
.switch1{
  width: 100%;
  height: 300rpx;
  line-height: 100rpx;
  font-size: 50rpx;
  text-align: center;
}
.switch1-view {
  width: auto;
  margin-top: 20rpx;
  margin-left: 50rpx;
}
</style>
